

<template>
    <div>
        <div style="display: flex ;margin-left: 150px ;margin-top: 150px">
        <label>快递公司：<el-input  style="width: 200px"  v-model="company"/></label>
        <label>订单号：<el-input  style="width: 200px" v-model="id"/></label>
            <el-button  type="primary" @click="gettest" style="margin-left: 30px"
            >查询</el-button>
        </div>
        <div v-if="this.isShow" class="block" style="margin-top: 100px;margin-left: 200px" v-loading="fullscreenLoading">


            <el-timeline >
                <el-timeline-item

                        v-for="(activity, index) in datat"
                        :key="index"
                        :timestamp="activity.time">
                    {{activity.info}}
                </el-timeline-item>
            </el-timeline>
        </div>
        <div v-else style="margin-top: 150px">
            <el-carousel indicator-position="outside">
                <el-carousel-item v-for="item in 4" :key="item"  :style="{backgroundImage:backgroundImage1}">
                    <h3>{{ item }}</h3>
                </el-carousel-item>
            </el-carousel>
        </div>


    </div>
</template>

<script>

    export default {
        name: "logistics",
        data(){
            return{
                //loading
                fullscreenLoading: false,
                //是否展示
                isShow:false,
                //订单号
                id:'',
                company:'圆通',
                datat :[],
                backgroundImage1: 'url(' +require('@/assets/guide1.jpg') + ')',


            }
        },
methods:{
    /**
     * 获取物流轨迹的数据
     */
    gettest(){

        const loading = this.$loading({
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
            loading.close();
        }, 2000);

        //https://api.66mz8.com/api/yto.php?num=2100225068
        //YT2082521302340
        if(this.id==''){
            this.$message({
                type: 'warning',
                message: '请输入订单号'
            });
        }

        else{
            this.fullscreenLoading = true;
     setTimeout(()=>{
         this.fullscreenLoading = false;
         this.$axios.post("https://api.66mz8.com/api/yto.php?num="+this.id).then(res=>{
             // console.log(res)
             console.log(res.data.data)
             this.datat =res.data.data
             if(res.data.data==null){
                 this.$message({
                     message:"请输入正确订单号",
                     type:"success"
                 })
             }else{
                 this.isShow=true
             }

         })
     },2000)
    }
    }


},


    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;

    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
</style>